<template>
    <div class="hngkTitle">
        <div class="titleWord">
            <div class="titleWord1">
                <div class="upContent1">
                    <div class="upWord1">
                        自然灾害
                    </div>
                </div>
                <div class="downContent1">
                    natural disaster
                </div>
            </div>
            <div class="upContent">
                <div class="upWord">
                    安全生产
                </div>
                <div class="upBtns">
                    <div @click="changeKs">
                        <img src="/data/images/hngk/xia.png" alt="">
                    </div>
                    <div @click="changeHy">
                        <img src="/data/images/hngk/shang.png" alt="">
                    </div>

                </div>
            </div>
            <div class="downContent">
                safeProduce
            </div>
        </div>
        
    </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  inject
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    setup(){
        const { ctx } = getCurrentInstance();
        function changeKs(){
            ctx.$parent.currentComponent = "Ks"
        }
        function changeHy(){
            ctx.$parent.currentComponent = "Hy"
        }
        onMounted(()=>{
            
        })
        return {
           changeKs,
           changeHy
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .hngkTitle
        position: absolute
        left:vw(462)
        top: vh(128)
        width:vw(162)
        cursor: pointer
        .titleWord
            .upContent
                display:flex
                .upWord
                    font-size:vw(20)
                    color: #00E5FD
                .upBtns
                    margin-left:vw(32)
                    margin-top:vw(2)
                    height:vh(45)
                    display:flex
                    flex-direction:column
                    justify-content :space-around
                    div
                        img
                            width:vw(16)
                            height:vw(15)
                            cursor pointer
            .downContent
                font-size: vw(18)
                font-style: oblique
                color: #00E5FD
                margin-top: vh(-20)
        .titleWord1
            margin-bottom:vh(20)
            .upContent1
                display:flex
                .upWord1
                    font-size:vw(20)
                    text-decoration:underline
                .upBtns1
                    margin-left:vw(16)
                    margin-top:vw(5)
                    height:vh(45)
                    display:flex
                    flex-direction:column
                    justify-content :space-around
                    div
                        img
                            width:vw(16)
                            height:vw(15)
                            cursor pointer
            .downContent1
                font-size: vw(18)
                font-style: oblique
                margin-top: vh(5)
                
</style>